<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>例子</title>
<style>
html,body {
	margin: 0;
	padding: 0;
	/*background-color: #E5E4E2;*/
	background-color: #red;
}

.normal {
	list-style-type: circle;
}

.seled {
	list-style-type: disc;
}
</style>
</head>
<body>
	<div class="list">
		<ul id="ul_list">
		</ul>
	</div>
	<script type="text/javascript">
		// 被java回调的js函数
		function invokeByDLL(jo) {
			if (!jo || !jo.method)return;
			alert(jo.method)
			if (jo.method == 'noteAdded') {// 节点已添加，需要更新
				document.getElementById("ul_list").innerHTML += createNoteItem(
						jo.value, true);
			}else if(jo.method=='noteRemoved'){
				removeNote(jo.value);
				if(jo.newSel)showDetail(jo.newSel)
			} else if (jo.method == 'willClose') {
				JWebTop.close();		
			}
		}
		function createNoteItem(name, seled) {
			return "<li class='" + (seled ? "seled" : "normal")
					+ "' onclick=\"javascript:showDetail('" + name/*注意这里没有处理特殊字符*/
					+ "')\">" + name + "</li>"
		}
		function showDetail(name) {
			if(name==null){
				if(first==null)return;
				name=first;
			}
			var toJava = {
				method : "showDetail",
				value : name
			}
			JWebTop.invokeRemote_NoWait(JSON.stringify(toJava));// 调用java，让其显示日记内容
			var listHtml = document.getElementById("ul_list");
			var childs = listHtml.childNodes;
			for (var i = childs.length - 1; i >= 0; i--) {
				var child = childs[i];
				if (child.nodeName != 'LI')
					continue;
				if (child.innerText == name) {
					child.className = "seled";
				} else if (child.className == "seled") {
					child.className = "normal";
				}
			}
		}
		function removeNote(name) {
			var listHtml = document.getElementById("ul_list");
			var childs = listHtml.childNodes;
			for (var i = childs.length - 1; i >= 0; i--) {
				var child = childs[i];
				if (child.nodeName != 'LI')
					continue;
				if (child.innerText == name) {
					listHtml.removeChild(child);
					break;
				}
			}
		}

		var first = null;
		var ListFuns={// 定义一个包装对象，将本页面的所有函数包起来，供远程回调用。演示的是带命名空间的CallBack方式，直接CallBack方式是initListFun
			onJavaWindowHwnd : function(jsonv){
				JWebTop.javaWindowHwnd =jsonv.value;
				toJava = {method : "getDetailAppFile"}
				var app = JWebTop.invokeRemote_CallBack(JSON.stringify(toJava),"ListFuns.onGetDetailAppFile");// 调用java，获取日记内容浏览器的地址
			},	
			onGetDetailAppFile : function(jsonv){
				ListFuns.app=jsonv.value;
				toJava = {method : "getDetailRect"}
				var rect = JWebTop.invokeRemote_CallBack(JSON.stringify(toJava),"ListFuns.onGetDetailRect");// 调用java，获取细节区的坐标信息
			},
			onGetDetailRect : function(rect){
				// alert(ListFuns.app+" javaWindowHwnd="+JWebTop.javaWindowHwnd+" rect=["+rect.x+","+rect.y+","+rect.w+","+rect.h+","+"]");
				JWebTop.runAppMore(ListFuns.app, parseInt(JWebTop.javaWindowHwnd),null,null,null,rect.x,rect.y,rect.w,rect.h);	
			}
		}
		function initListFun(jo){// 演示的是直接CallBack方式，带命名空间的CallBack方式参见ListFuns
			var html = "";
			// 初始化日记列表数据
			var values = jo['value'];
			for ( var idx in values) {
				var name = values[idx];
				if (first == null) {
					first = name;
					html += createNoteItem(name, true)
				} else {
					html += createNoteItem(name, false)
				}
			}
			document.getElementById("ul_list").innerHTML = html;
			// 初始化日记细节浏览器
			var toJava = {method : "javaWindowHwnd"}
			JWebTop.invokeRemote_CallBack(JSON.stringify(toJava),"ListFuns.onJavaWindowHwnd")
		}
		function afterBrowserInit() {// 直接的js代码会执行两次，所以这里需要通过
			// JWebTop.showDev();
			var initListData = {
				method : "initList"
			}
			JWebTop.invokeRemote_CallBack(JSON.stringify(initListData),"initListFun");// 直接顶级函数调用					
		}
		addEventListener("JWebTopReady", afterBrowserInit);
	</script>

</body>
</html>
